<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <title>部署产品 | Yeelink用户中心</title>
    <link type="text/css" rel="stylesheet" href="resource/css/framework.css" />
    <link type="text/css" rel="stylesheet" href="resource/css/main.css" />
</head>
<body>
<div class="page">
<!--header begin-->
<header>
	<div class="bigcontainer">
		<div id="logo">
			<a href="./">yeelink用户中心</a>
		</div>
		<div class="user">
			<div class="ui inline labeled icon top right pointing dropdown">
			<img class="ui avatar image" src="resource/images/avatar-default.gif">
			欢迎，$用户名
			<i class="dropdown icon"></i>
				<div class="menu">
					<a class="item" href="http://www.yeelink.net"><i class="reply mail icon"></i>返回首页</a>
					<a class="item" href="/user/logout"><i class="sign out icon"></i>注销登录</a>
				</div>
			</div>
		</div>
	</div>
</header>
<!-- the main menu-->
<div class="ui teal inverted menu fluid">
	<div class="bigcontainer">
		<div class="right menu">
			<a class="item" href="./index.html"><i class="home icon"></i>管理首页</a>
			<a class="item" href="./devices_list.html"><i class="sitemap icon"></i>设备</a>
			<a class="active item" href="./product_list.html"><i class="cloud icon"></i>产品</a>
			<a class="item" href="./user_profile.html"><i class="info icon"></i>账户</a>
		</div>
	</div>
</div>
<!--the main content begin-->
	<div class="container">
	<!--the content-->
		<div class="ui grid">
			<!--the vertical menu-->
			<div class="four wide column">
				<div class="verticalMenu">
					<div class="ui vertical pointing menu fluid">
  						<a class="active teal item" href="./deploy.html">
							<i class="rocket icon"></i> 部署新产品
  						</a>
  						<a class="item" href="./product_list.html">
    						<i class="cloud icon"></i> 我的产品
  						</a>
  						<a class="item" href="">
							<i class="bar chart icon"></i> 产品统计
  						</a>
					</div>
				</div>
			</div>
			<!--the newDevice form-->
			<div class="twelve wide column">
				<div class="pageHeader">
					<div class="segment">
						<h3 class="ui dividing header">
  							<i class="large rocket icon"></i>
  							<div class="content">
    							部署新产品
    							<div class="sub header">你的设备模板即将成为真正的产品</div>
  							</div>
						</h3>
					</div>
				</div>
				<div class="ui form fluid vertical segment">
					<form name="form" action="/user/deploy" method="post">
						<div class="two fields">
                        	<div class="field">
                            	<label>产品名称</label>
                                <div class="ui small left icon input">
                                	<input type="text" placeholder="给产品起个响亮的名字，不超过30个字符……">
                                    <i class="cloud icon"></i>
                                </div>
                            </div>
                        </div>
                        <div class="two fields">
                            <div class="field">
                            	<label>产品模板</label>
                                <div class="ui selection dropdown">
                                      <input type="hidden" name="template" value="温度自动报警器">
                                      <div class="text">温室自动报警器</div>
                                      <i class="dropdown icon"></i>
                                      <div class="menu">
                                            <div class="item" data-value="温室自动报警器">温室自动报警器</div>
                                        	<div class="item" data-value="设备01">设备01</div>
                                        	<div class="item" data-value="设备02">设备02</div>
                                        	<div class="item" data-value="设备03">设备03</div>
                                      </div>
                                </div>
                                <a class="ui mini red button" href="./add.html" title="产品总是依赖设备充当模板">创建新设备</a>
                            </div>
                        </div>
                        <div class="two fields">
                            <div class="field">
                            	<label>批次 <small>（自动生成）</small></label>
                                <div class="ui small left icon input">
                                    <input type="text" value="L20131205-ylb-001" readonly>
                                    <i class="ordered list icon"></i>
                                    <div class="ui corner label">
									</div>
                                </div>
                            </div>
                        </div>
                        <div class="two fields">
                            <div class="field">
                            	<label>本批次数目</label>
                                <div class="ui small left icon input">
                                	<input type="number" placeholder="比如，50">
                                    <i class="truck icon"></i>
                                </div>
                            </div>
                        </div>
                        <div class="two fields">
                        	<div class="field">
                            	<label>序列号格式</label>
                                <div class="ui small left icon input">
                                	<input type="text" placeholder="Ymd+流水号">
                                    <i class="text file outline icon"></i>
                                </div>
                            </div>
                        </div>
                        <div class="two fields">
                            <div class="field">
                            	<label>产品密钥参数</label>
                                <div class="ui small left icon input">
                                	<input type="text">
                                    <i class="subscript icon"></i>
                                </div>
                            </div>
                        </div>
                            <div class="field">
                                <label>数据保密控制</label>
                                <div class="ui small input">
                                    <span class="ui checkbox">
                                      <input type="checkbox" name="">
                                      <label>平台开放</label>
                                    </span>
                                    <span class="ui checkbox">
                                      <input type="checkbox" name="">
                                      <label>仅对开发商开放</label>
                                    </span>
                                    <span class="ui checkbox">
                                      <input type="checkbox" name="">
                                      <label>不开放</label>
                                    </span>
                                </div>
                            </div>
                        <div class="field">
                        	<label>产品描述</label>
                            <textarea placeholder="不超过150个字符……"></textarea>
                        </div>

                    <input class="ui small blue submit button" type="submit" value="立即部署">
                    <input class="ui small basic button" type="reset" value="取消">
					</form>
					<!--the form end-->
				</div>
			</div>
		</div>
	</div>
</div>
<!--footer begin-->
<footer>
	<div id="copyrights">
		<div class="inset">
			<div class="bigcontainer">
				<div class="fl">
					<div class="logo"></div>
					<p>&copy; 2020 青岛亿联客信息技术有限公司, 版权所有<br />
<a href="http://www.miibeian.gov.cn" target="_blank">鲁ICP备12022271号</a></p>
				</div>
			</div>
		</div>
	</div>
</footer>

<script type="text/javascript" src="resource/javascript/jquery.min.js"></script>
<script type="text/javascript" src="resource/javascript/framework.js"></script>
<script>
	$('.ui.selection.dropdown')
      .dropdown();

    $('.ui.dropdown')
      .dropdown();

    $('.ui.checkbox')
      .checkbox();
</script>
</body>
</html>
